<template>
  <el-table
      :id = "tableDataId"
      :data = "dataList"
      @row-dblclick = "editData"
      @selection-change = "handleSelectionChange"
      :row-key = "getRowIdentity"
      :stripe = "true"
      :fit = "true"
      :highlight-current-row = "true"
      border
      :ref = "tableRef"
  >
    <el-table-column
        type = "selection"
        align = "center"
        fixed = "left"
        :reserve-selection = "true"
    />
    <template v-for = "item in fieldList">
      <el-table-column
          :prop = "item.fieldName"
          :label = "item.label "
          :min-width = "item.minWidth+'px'"
          :formatter = "dataFormat"
          v-if = "item.tableShow"
          sortable
          :show-overflow-tooltip = "true">
      </el-table-column>
    </template>
    <el-table-column fixed = "right" label = "操作" min-width = "180px">
      <template #default = "scope">
        <el-button v-if = "permission.edit" @click = "editById(scope.row[primaryKey])" link title = ""
                   type = "primary">
          <el-tooltip content = "编辑">编辑</el-tooltip>
        </el-button>
        <el-button v-if = "permission.view" @click = "viewById(scope.row[primaryKey])" link title = ""
                   type = "primary">
          <el-tooltip content = "查看">查看</el-tooltip>
        </el-button>
        <el-button v-if = "permission.delete" @click = "deleteById(scope.row[primaryKey])" link title = ""
                   type = "danger">
          <el-tooltip content = "删除">删除</el-tooltip>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    primaryKey: {type: String, required: true},
    tableDataId: {type: String, required: true, default: "tableId"},
    permission: {type: Object, required: true},
    dataList: {type: Object, required: true},
    fieldList: {type: Array, required: true},
    dataFormatFun: {type: Function, default: null},
    tableRef: {type: String, required: true, default: "multipleTable"}
  },
  name: "StarHorseTableComp",
  methods: {
    editData(row, column, event) {
      this.$emit("editData", row, column, event);
    },
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    getRowIdentity(row) {
      return row[this.primaryKey];
    },
    dataFormat(row, column, cellValue, index) {
      return this.dataFormatFun(row, column, cellValue, index)
    },
    viewById(id) {
      this.$emit("viewById", id);
    },
    editById(id) {
      this.$emit("editById", id);
    },
    deleteById(id) {
      this.$emit("deleteById", id)
    }
  }
}
</script>

<style scoped>

</style>